<template>
	<view>
		<!-- 头部结构 -->
		<div class="data-statement">
			<div class="statement-title">全国疫情状况</div>
			<div class="update-time">截止 {{updateTime}}</div>
			<div class="shuoming"><span>数据说明</span></div>
		</div>

		<!-- 摘要组件  -->
		<e-summary :today="today" :total="total"> </e-summary>
		<!-- 地图组件 -->
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">地图</view>
			</view>
			<view class="qiun-charts">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasMap" id="canvasMap" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchMap"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasMap" id="canvasMap" class="charts" @touchstart="touchMap"></canvas>
				<!--#endif-->
			</view>
		</view>

		<div class="section-title">国内病例</div>
		<!-- 列表组件 -->
		<e-table :dataSource="tables"></e-table>
	</view>
</template>

<script>
	// 导入自定义组件
	import ESummary from "../../components/Summary.vue"
	// 加载静态 JSON 数据，
	import tables from "@/common/data/tables.json"
	// 验证数据导入
	// console.log(tables)

	// 导入列表组件
	import ETable from "@/components/Table.vue"

	// 导入 图表组件
	import uCharts from '@/components/u-charts/u-charts.js';
	// 存储 当前页面 this
	var _self;
	// canvaMap 地图实例对象
	var canvaMap = null;

	// 导入地图数据
	import chinaMap from "@/common/data/chinaMap.json"
	import hubeiMap from "@/common/data/hubeiMap.json"

	export default {
		components: {
			ESummary,
			ETable
		},
		data() {
			return {
				updateTime: '2020-03-12',
				// 摘要数据 传递到 组件中
				today: {
					"confirmedIncr": 25,
					"suspectedIncr": 6,
					"deadIncr": 11,
					"curedIncr": 1342
				},
				total: {
					"confirmedCount": 80980,
					"suspectedCount": 85,
					"deadCount": 3173,
					"curedCount": 62909
				},
				// 在 Vue 中接收导入的数据
				tables: tables,

				// 地图 属性
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: ''
			}
		},
		onLoad() {
			_self = this;
			// 判断是否是 支付宝小程序
			//#ifdef MP-ALIPAY
			// 是获取 系统信息
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			// 设置 图标宽高
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(750);
			// 获取 地图数据
			this.getServerData();
		},
		methods: {
			getServerData() {
				// 加载本地 地图数据
				console.log(hubeiMap.features)
				let cMap = {
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				cMap.series = hubeiMap.features;
				_self.showMap("canvasMap", cMap);

			},
			showMap(canvasId, chartData) {
				canvaMap = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'map',
					fontSize: 11,
					padding: [0, 0, 0, 0],
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: '#666666',
							fillOpacity: 0.6
						}
					}
				});
			},
			touchMap(e) {
				canvaMap.showToolTip(e, {
					format: function(item) {
						return item.properties.name
					}
				});
			}
		}

	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	@import url("../../styles/init.css");

	.qiun-charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}
</style>
